@import '../../variables.scss';
@import '~@automattic/calypso-color-schemes/src/calypso-color-schemes';
@import 'assets/stylesheets/gutenberg-base-styles';
@import '../../mixins';

.signup-form__overlay.components-modal__screen-overlay {
	background-color: $white;
}

.signup-form.components-modal__frame {
	border: none;
	border-radius: 0;
	box-shadow: none;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	transform: translate( 0%, 0% );
	overflow-x: hidden; // prevent fixed reCAPTCHA badge from creating a horizontal scrollbar

	.components-modal__header {
		display: none;
	}

	.components-modal__content {
		padding: 0;
	}

	.signup-form__title {
		@include onboarding-heading-text-mobile;
		text-align: center;

		@include break-mobile {
			@include onboarding-heading-text;
		}
	}

	.signup-form__body {
		position: relative;
		padding: 44px 20px 0;
		text-align: center;

		@include break-mobile {
			padding: 0 20px 20px;
			position: absolute;
			top: 25%;
			left: 50%;
			width: 100%;
			max-width: 540px;
			transform: translateX( -50% );
		}
	}
	.signup-form__legend {
		padding-bottom: 42px;

		& > p {
			@include onboarding-large-text;
			color: var( --studio-gray-40 );
		}
	}

	.components-text-control__input {
		padding: 18px 14px;
		font-size: $font-body;
		line-height: 17px;
		border-radius: 0;
		border: 1px solid var( --studio-gray-10 );
		width: 100%;
		max-width: 100%;

		&::placeholder {
			@include onboarding-medium-text;
		}

		@include break-mobile {
			@include onboarding-medium-text;
			max-width: 400px;
		}
	}

	.signup-form__error-notice {
		@include onboarding-medium-text;
		margin: 0;
		border: none;
		background: none;
		color: var( --studio-red-60 );

		@include break-mobile {
			margin: 0 16px;
		}

		.components-notice__content {
			margin: 0;
		}
	}

	.signup-form__login-link {
		@include onboarding-medium-text;
		margin: 4px 0 29px;
		color: var( --studio-gray-40 );

		.signup-form__link {
			@include onboarding-medium-text;
			color: var( --studio-gray-40 );
		}
	}

	.signup-form__link,
	.signup-form__link a {
		@include onboarding-medium-text;
		color: var( --studio-gray-40 );
	}

	.signup-form__terms-of-service-link {
		@include onboarding-medium-text;
		text-align: center;
		color: var( --studio-gray-30 );
		margin: 15px auto 20px;
		max-width: 400px;
	}

	.signup-form__recaptcha_tos {
		margin: 20px auto 15px;

		@include break-small {
			display: none;
		}
	}

	.signup-form__footer {
		text-align: center;
	}

	.signup-form__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: $onboarding-header-height;
		background: $white;

		left: 0;
		right: 0;
		// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
		top: 0;
		position: sticky;

		// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
		@include break-small {
			position: fixed;
			padding: $grid-unit-10;
		}
	}

	.signup-form__header-section {
		display: flex;
		align-items: center;
		left: 0;
	}

	.signup-form__header-section-item {
		margin-left: 10px;

		&.signup-form__header-wp-logo {
			margin-left: 24px - $grid-unit-10; // ( 24 - header padding )
		}

		&.signup-form__header-close-button {
			margin-right: 24px - $grid-unit-10; // ( 24 - header padding )
		}

		.signup-form__link {
			margin-right: 24px - $grid-unit-10; // ( 24 - header padding )
			font-weight: 600;
			@include onboarding-small-text;
		}
	}

	.signup-form__header-wp-logo {
		color: var( --studio-blue-90 );
		display: flex;
	}

	// override spacing between input fields
	.components-base-control .components-base-control__field {
		margin-bottom: 10px;
	}
}

.grecaptcha-badge {
	visibility: hidden;

	@include break-small {
		visibility: visible;
	}
}
